<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page contentType="text/html; charset=UTF-8" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>

<html>
	<head>
		<title>Card Vault</title>
		
		<script src="<c:url value="/resources/js/jquery-1.8.3.min.js" />"></script>
		<script src="<c:url value="/resources/js/bootstrap.min.js" />"></script>
		<script src="<c:url value="/resources/js/scripts.js" />"></script>
		<link href="<c:url value="/resources/css/normalize.css" />" rel="stylesheet" type="text/css" media="screen"/>
		<link href="<c:url value="/resources/css/bootstrap.min.css" />" rel="stylesheet" type="text/css" media="screen"/>
		<link href="<c:url value="/resources/css/style.css" />" rel="stylesheet" type="text/css" media="screen"/>
	</head>
    <body>
        <div id="wrapper" style="height: 750px;">
        	<div class="heading">Card Vault</div>
        	<div class="confirmationText" style="margin-left: 70px;">
	        	<p>You're about to register your cards for the Card Vault service. Please note that an amount of Rxxx (amount is
	        	<br>automatically calculated based on the cards that user has selected) will be debit to the account that you enter
	        	<br>below every month</p> 
				<p class="muted">Once you have filled in your details a statement will be mailed to you immediately.</p>
        	</div>
			<div class="billingMethod" style="margin-left: 290px;">
				<div class="controls" >
					<select id="inputCardType">
						<option selected="selected" disabled="disabled">Billing method</option>
						<option>1</option>
						<option>2</option>
						<option>3</option>
						<option>4</option>
						<option>5</option>
					</select>
				</div>
			</div>
			<div class="confirmLeftColumn">
				<p style="margin-left: 70px;">Monthly by Debit Order</p>
        		<div class="control-group" style="margin-left: 70px;">
				    <div class="controls">
				      <input type="text" id="inputAccNumber" placeholder="Account number...">
				    </div>
			    </div>
        		<div class="control-group" style="margin-left: 70px;">
				    <div class="controls">
				      <input type="text" id="inputAccHolder" placeholder="Account holder...">
				    </div>
			    </div>
			    <div class="control-group" style="margin-left: 70px;">
				    <div class="controls">
						<select id="inputCardType">
							<option selected="selected" disabled="disabled">Acc type</option>
							<option>Bank</option>
							<option>Bank 1</option>
							<option>Bank 2</option>
							<option>Bank 3</option>
							<option>Bank 4</option>
						</select>
					</div>
			    </div>
        		<div class="control-group" style="margin-left: 70px;">
				    <div class="controls">
				      <input type="text" id="inputBranchName" placeholder="Branch name...">
				    </div>
			    </div>
        		<div class="control-group" style="margin-left: 70px;">
				    <div class="controls">
				      <input type="text" id="inputBranchCode" placeholder="Branch code...">
				    </div>
			    </div>
			</div>
        	<div class="confirmRightColumn">
        		<p style="margin-left: 70px;">Monthly by Credit Card</p>
        		<div class="control-group" style="margin-left: 70px;">
				    <div class="controls">
				      <input type="text" id="inputCardNumber" placeholder="Card number...">
				    </div>
			    </div>
			    <div class="control-group" style="margin-left: 70px;">
				    <div class="controls">
				      <input type="text" id="inputNameOnCard" placeholder="Name on card...">
				    </div>
			    </div>
			    <div class="control-group" style="margin-left: 70px;">
				    <div class="controls">
				      <input type="text" id="inputEcpiryDate" placeholder="Expiry date...">
				    </div>
			    </div>
			    <div class="control-group" style="margin-left: 70px;">
				    <div class="controls">
				      <input type="text" id="inputCCVNumber" placeholder="CCV number...">
				    </div>
			    </div>
			</div>
        	<div class="clear"></div>
        	
        	<div class="confirmLeftColumn">
        		<label class="checkbox" style="margin-left: 70px;">
			    	<input type="checkbox" name="agree" id="agree1"> I agree to terms and conditions
			    </label>
        	</div>
        	<div class="confirmRightColumn" >
        		<label class="checkbox" style="margin-left: 70px;">
			    	<input type="checkbox" name="agree" id="agree2"> I agree to terms and conditions
			    </label>
        	</div>
        	<div class="clear"></div>
        	<br>
        	<form class="form-horizontal" method="post" action="success" 
        		  style="margin-left: 70px;" onsubmit="return checkBilling()" >
				<div class="controls2">
					<button type="submit" class="btn" >Done</button>
				</div>
			</form>
			<div class="fixed_block"> 
			 	<div id="fixed">
					<div class="mainview" align="center">
						<jsp:include page="service/fixed_block.jsp"></jsp:include>
					</div>
				</div> 
		  	</div>
        </div>
    </body>
</html>